<template>
	<div class="lists-nav-container">
    <div class="lists-nav">
      <section :class="navData.curType?'':'cur'" @click="clickListsNav('')">所有订单<i></i></section>
      <section :class="navData.curType==1?'cur':''" @click="clickListsNav(1)">待发货<i></i></section>
      <section :class="navData.curType==2?'cur':''" @click="clickListsNav(2)">待收货<i></i></section>
      <section :class="navData.curType==3?'cur':''" @click="clickListsNav(3)">已收货<i></i></section>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
  
    },
    props: {
      navData: {
        type: Object,
        default: {
          curType: ''
        }
      }
    },
    data() {
      return {
      }
    },
    methods: {
      clickListsNav(type) {
        if (type != this.navData.curType) {
          this.$emit('changeOrderType', type)
          this.navData.curType = type
        }
      }
    },
    created() {
    }
  })
</script>

<style lang="scss">
@import 'src/styles/order/lists';
// .lists-nav{
//   display:flex;
//   background:#fff;
//   section{
//     position:relative;
//     flex:auto;
//     height:72px;
//     line-height:72px;
//     font-size:26px;
//     text-align:center;
//     &.cur{
//       color:#ff4d00;
//       i{
//         position: absolute;
//         left: 50%;
//         margin-left: -20%;
//         bottom: -1%;
//         width: 40%;
//         height: 4px;
//         font-size: 0;
//         overflow: hidden;
//         background-color: #ff6e42;
//       }
//     }
//   }
// }
</style>